<template>
    <div id="city">
        <div class="left">
            <div>
                <p>热门城市</p>
                <p>
                    <span>北京</span>
                    <span>上海</span>
                    <span>天津</span>
                    <span>合肥</span>
                    <span>郑州</span>
                </p>
            </div>
            <div>
                <p>A</p>
                <p>阿克苏</p>
                <p>安康</p>
                <p>安庆</p>
            </div>
            <div>
                <p>B</p>
                <p>白山</p>
                <p>白城</p>
                <p>宝鸡</p>
            </div>
            <div>
                <p>C</p>
                <p>沧州</p>
                <p>长春</p>
                <p>昌吉</p>
            </div>
            <div>
                <p>D</p>
                <p>大理</p>
                <p>大连</p>
                <p>大庆</p>
            </div>
            <div>
                <p>E</p>
                <p>鄂尔多斯</p>
                <p>恩施</p>
                <p>鄂州</p>
            </div>
        </div>

        <div class="right">
            <p>A</p>
            <p>B</p>
            <p>C</p>
            <p>D</p>
            <p>E</p>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    .left{
        float: left;
        border-right: 1px solid #ccc;
        width: 90%;
        background: #fff5f0;
    }
    .right{
        float:right;
        width: 8%;
        padding-top:66% ;
    }
    #city{
        overflow: hidden;
        padding-bottom: 50px;
    }
    .left div p:first-child{
        background: #f0f0f0;
    }
    p{
        line-height: 30px;
        padding-left:10px;
    }
    span{
        background: white;
        border: 1px solid #ccc;
        width: 80px;
        height: 35px;
        margin: 10px 10px 10px 0px;
        display: inline-block;
        text-align: center;
    }
    .left div:first-child{
        margin-top: 20px;
    }
</style>